<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background: #FF7C87;
			padding-top: 100px;

		}
		.box{
			width: 375px;
			height: 305px;
			background: #9CD1EA;
			margin: 0 auto;
			border-radius: 5px;
			padding-top: 25px;
			padding-left: 25px;

		}
		.box li{
			width: 80px;
			height: 45px;
			background: #FFFFFF;
			list-style: none;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
			line-height: 45px;
			font-family: "微软雅黑";
			color: #988F8C;
			border-radius: 5px;
			cursor: pointer;
			border: 1px solid #fff;
		}
		.box li.clear{
			background: #FF9FA8;
			color: #fff;
		}
		.box li.yunsuan{
			background: #FFF0F5;
		}
		.box li.sum{
			background: #F1FF92;
		}
		.box li.show{
			background: #7AA6BA;
			width: 250px;
			color: #fff;
			text-align: right;
			font-size: 30px;
			padding-right: 10px;
		}


	</style>
	<script type="text/javascript">

		window.onload = function  () {
			//捉取所有需要加点击的元素
			xbscllick = document.getElementsByClassName('xbscllick');
			//捉取显示元素
			show = document.getElementById('show');
			//循环加事件
			for (var i = 0; i < xbscllick.length; i++) {
				add_click(i);
			};

			/**
			 * [add_click 给每个元素加事件]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-29T09:59:24+0800
			 * @param    {[int]}                 x [对应元素的下标]
			 */
			function add_click (x) {
				xbscllick[x].onclick = function() {
					run(xbscllick[x].textContent);
				}
				xbscllick[x].onmousedown = function() {
					xbscllick[x].style.border="1px solid red";
				}
				xbscllick[x].onmouseup = function() {
					xbscllick[x].style.border="1px solid white";
				}
			}
			/**
			 * [run 判断点击的文本走不同的流程]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-29T10:00:11+0800
			 * @param    {[type]}                 str [点击的获得的文本]
			 * @return   {[type]}                     [无返回值]
			 */
			function run (str) {

				switch(str){
					case "C":
					runClear();
					break;
					case "=":
					runRes()
					break;
					default:
					runAdd(str);
				}	
			}
			/**
			 * [runClear 清除显示区域]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-29T10:02:28+0800
			 * @return   {[type]}                 [description]
			 */
			function runClear () {
				show.innerHTML="0";
				addStr ="";
			}
			/**
			 * [runRes 计算结果，把结果赋值到显示区域]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-29T10:02:52+0800
			 * @return   {[type]}                 [description]
			 */
			function runRes () {
				res = eval(addStr);
				show.innerHTML=res;
			}
			//定义一个空的字符串，来进行拼接
			addStr ="";
			/**
			 * [runAdd 拼接字符串，并显示到]
			 * @Author   Xuebingsi
			 * @DateTime 2017-04-29T10:03:37+0800
			 * @param    {[type]}                 str [description]
			 * @return   {[type]}                     [description]
			 */
			function runAdd(str) {
				addStr +=str;
				show.innerHTML=addStr;

				// alert(addStr);
			}
		}



	</script>
</head>
<body>
	<ul class="box">
		<li class="clear xbscllick">C</li>
		<li class="show" id="show">0</li>
		<li class="xbscllick">7</li>
		<li class="xbscllick">8</li>
		<li class="xbscllick">9</li>
		<li class="yunsuan xbscllick">+</li>
		<li class="xbscllick">4</li>
		<li class="xbscllick">5</li>
		<li class="xbscllick">6</li>
		<li class="yunsuan xbscllick">-</li>
		<li class="xbscllick">1</li>
		<li class="xbscllick">2</li>
		<li class="xbscllick">3</li>
		<li class="yunsuan xbscllick">/</li>
		<li class="xbscllick">0</li>
		<li class="xbscllick">.</li>
		<li class="sum xbscllick">=</li>
		<li class="yunsuan xbscllick">*</li>
	</ul>
</body>
</html>